	<script type="text/javascript" charset="utf-8">
		function init() {
			scheduler.locale.labels.timeline_tab = "Timeline";
			scheduler.locale.labels.section_custom = "Section";
			scheduler.locale.labels.section_important = "Target";
			scheduler.locale.labels.section_garis = "ID";
			scheduler.locale.labels.new_event = "Note ";
			scheduler.config.details_on_create = false;
			scheduler.config.details_on_dblclick = false;
      <?php
      if($edit === FALSE AND $this->session->userdata("id") != 1){
        print "scheduler.config.readonly = true;";
      }
      ?>
//			scheduler.config.readonly = true;
			scheduler.config.xml_date = "%Y-%m-%d %H:%i";
			scheduler.keys.edit_save = "";
			//===============
			//Configuration
			//===============
			scheduler.templates.event_class = function(start, end, event) {
				event.color = (event.important) ? "red" : "";
				return "";
			};

			var sections = [
        <?php
        foreach ($master as $mst){
          print "{key: {$mst->id_dev_step}, label: '<b>{$mst->name}</b>'},";
        }
        ?>
			];

			var basicSort = function(a, b) {
				if (+a.start_date == +b.start_date) {
					return a.id > b.id ? 1 : -1;
				}
				return a.start_date > b.start_date ? 1 : -1;
			};
			var prioritySort = function(a, b) {
				// here we can define sorting logic, what event should be displayed at the top
				if (a.important && !b.important) {
					// display a before b
					return -1;
				} else {
					if (!a.important && b.important) {
						// display a after b
						return 1;
					} else {
						return basicSort(a, b);
					}
				}
			};

			// this function is not universal and should be changed depending on your timeline configuration
			var timeframeSort = function(a, b) {
				a_timeframe_start = scheduler.date.date_part(new Date(a.start_date));
//				Tanggal = new Date(a.start_date);
//				console.log(Tanggal.getDate());
				a_timeframe_end = scheduler.date.date_part(new Date(a.end_date));
				if (+a.end_date != +a_timeframe_end) {
					a_timeframe_end = scheduler.date.add(a_timeframe_end, 1, "day");
				}

				b_timeframe_start = scheduler.date.date_part(new Date(b.start_date));

				if (a_timeframe_start < b.end_date && a_timeframe_end > b.start_date && +a_timeframe_start == +b_timeframe_start) {
					return prioritySort(a, b);
				} else {
					return (a_timeframe_start < b_timeframe_start) ? -1 : 1;
				}
			};


			scheduler.createTimelineView({
				name: "timeline",
				x_unit: "day",
				x_date: "%d",
				x_step: 1,
				x_size: <?=$dev[0]->max_date?>,
				x_start: 1,
				x_length: <?=$dev[0]->max_date?>,
				y_unit: sections,
				y_property: "section_id",
				render: "bar",
				round_position: true,
				sort: timeframeSort,
				second_scale:{
                    x_unit: "month", // unit which should be used for second scale
                    x_date: "%F %Y" // date format which should be used for second scale, "July 01"
                }
			});
			// Working week
			scheduler.date.timeline_start = scheduler.date.day_start;
			scheduler.date.add_timeline = function(date, step, something) {
				return scheduler.date.add(date, step * 7, "day");
			};

			//===============
			//Data loading
			//===============
			scheduler.config.lightbox.sections = [
        { name: "garis", height: 2, map_to: "id_garis", type: "textarea", focus: false },
				{ name: "important", map_to: "important", type: "checkbox", checked_value: 1, unchecked_value: 0 },
				{ name: "description", height: 50, map_to: "text", type: "textarea", focus: true },
				{ name: "custom", height: 23, type: "select", options: sections, map_to: "section_id" },
				{ name: "time", height: 72, type: "time", map_to: "auto"}
			];
			
			var scheduler_container = document.getElementById("scheduler_here");
			var scheduler_container_divs = scheduler_container.getElementsByTagName("div");
			var dhx_cal_data = scheduler_container_divs[scheduler_container_divs.length-1];
			
			var nl2br = function (str, is_xhtml) {
				var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
				return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
			}
			
			var format=scheduler.date.date_to_str("%Y-%m-%d %H:%i"); 
			scheduler.templates.tooltip_text = function(start,end,event) {
				return "<b>Description:</b><br /> "+nl2br(event.text)+"<br/>"+
				"<b>Start date:</b> "+format(start)+"<br/><b>End date:</b> "+format(end);
			};
			
			dhtmlxTooltip.isTooltipTarget = function(target) {
//			console.log(target);
				while (target.parentNode && target != dhx_cal_data) {
					var css = target.className.split(" ")[0];
					// if we are over matrix cell or tooltip itself
					if (css == "dhx_matrix_scell" || css == "dhtmlXTooltip") {
						return { classname: css };
					}
					target = target.parentNode;
				}
				return false;
			};
			
			scheduler.attachEvent("onMouseMove", function(id, e) {
				var timeline_view = scheduler.matrix[scheduler.getState().mode];

				// if we are over event then we can immediately return
				// or if we are not on timeline view
				if (id || !timeline_view) {
					return;
				}

				// native mouse event
				e = e||window.event;
				var target = e.target||e.srcElement;

				var tooltipTarget = dhtmlxTooltip.isTooltipTarget(target);
				if (tooltipTarget) {
					
					if (tooltipTarget.classname == "dhx_matrix_scell") {
						// we are over cell, need to get what cell it is and display tooltip
						var section_id = scheduler.getActionData(e).section;
						var section = timeline_view.y_unit[timeline_view.order[section_id]];

						// showing tooltip itself
						var text = "Tooltip for <b>"+section.label+"</b>";
						dhtmlxTooltip.delay(dhtmlxTooltip.show, dhtmlxTooltip, [e, text]);
					}
					if (tooltipTarget.classname == "dhtmlXTooltip") {
						dhtmlxTooltip.delay(dhtmlxTooltip.show, dhtmlxTooltip, [e, dhtmlxTooltip.tooltip.innerHTML]);
					}
				}
			});
			scheduler.init('scheduler_here', new Date(<?=date("Y", strtotime($dev[0]->start_tanggal))?>, <?=date("m", strtotime($dev[0]->start_tanggal))-1?>, <?=date("d", strtotime($dev[0]->start_tanggal))?>), "timeline");
			scheduler.parse([
        <?php
        foreach($line as $key_ln => $ln){
          foreach($ln as $garis){
            print "{ start_date: '{$garis->time_start}', id_garis: '{$garis->id_dev_check}',end_date: '{$garis->time_end}', text: '".  str_replace("\n", "<br>", $garis->note) ."', section_id: {$key_ln}, important: {$garis->sifat} },";
          }
        }
        ?>
			], "json");
      scheduler.attachEvent("onEventSave",function(id,data,is_new_event){
        if(is_new_event){
          site = '<?=site_url("dev-checklist/reportpost")?>';
          var tanggal_mulai = new Date(data.start_date);
          var mulai_bulan = tanggal_mulai.getMonth()*1+1;
          var mulai_kirim = tanggal_mulai.getFullYear()+"-"+mulai_bulan+"-"+tanggal_mulai.getDate()+" "+tanggal_mulai.getHours()+":"+tanggal_mulai.getMinutes()+":"+tanggal_mulai.getSeconds();

          var tanggal_selesai = new Date(data.end_date);
          var selesai_bulan = tanggal_selesai.getMonth()*1+1;
          var selesai_kirim = tanggal_selesai.getFullYear()+"-"+selesai_bulan+"-"+tanggal_selesai.getDate()+" "+tanggal_selesai.getHours()+":"+tanggal_selesai.getMinutes()+":"+tanggal_selesai.getSeconds();
  //        alert(data.id_garis);
          var hk = $.ajax({
            type: 'POST',
            url: site,
            async:false,
            data: { note: data.text, section_id: data.section_id, time_start: mulai_kirim, time_end: selesai_kirim, sifat: data.important, id_outlet_dev: <?=$dev[0]->id_outlet_dev?>, id_garis: data.id_garis }
            }).done(function( msg ) {
  //            console.log(msg);
              return true;
          }).responseText;
          data.id_garis = hk;
        }
        return true;
      });
      scheduler.attachEvent("onEventChanged", function(event_id,event_object){
      console.log(event_object);
        var site = '<?=site_url("dev-checklist/reportupdate")?>';
        var tanggal_mulai = new Date(event_object.start_date);
        var mulai_bulan = tanggal_mulai.getMonth()*1+1;
        var mulai_kirim = tanggal_mulai.getFullYear()+"-"+mulai_bulan+"-"+tanggal_mulai.getDate()+" "+tanggal_mulai.getHours()+":"+tanggal_mulai.getMinutes()+":"+tanggal_mulai.getSeconds();

        var tanggal_selesai = new Date(event_object.end_date);
        var selesai_bulan = tanggal_selesai.getMonth()*1+1;
        var selesai_kirim = tanggal_selesai.getFullYear()+"-"+selesai_bulan+"-"+tanggal_selesai.getDate()+" "+tanggal_selesai.getHours()+":"+tanggal_selesai.getMinutes()+":"+tanggal_selesai.getSeconds();
//        alert(data.id_garis);
        var hk = $.ajax({
          type: 'POST',
          url: site,
          async:false,
          data: { note: event_object.text, section_id: event_object.section_id, time_start: mulai_kirim, time_end: selesai_kirim, sifat: event_object.important, id_outlet_dev: <?=$dev[0]->id_outlet_dev?>, id_garis: event_object.id_garis }
          }).done(function( msg ) {
//            console.log(msg);
            return true;
        }).responseText;
        event_object.id_garis = hk;
        return true;
      });
      scheduler.attachEvent("onBeforeEventDelete", function(event_id,event_object){
        var site = '<?=site_url("dev-checklist/reportdelete")?>';
        $.ajax({
          type: 'POST',
          url: site,
          async:false,
          data: { id_garis: event_object.id_garis }
          }).done(function( msg ) {
//            console.log(msg);
            return true;
        });
        return true;
      });
		}
	</script>
</head>
<body onload="init();">
  <h2>TIMELINE REPORT</h2>
  <table>
    <tr>
      <td>Nama Outlet</td>
      <td>: <b>Mr. MONTIR <?=$detail[0]->name?></b></td>
    </tr>
    <tr>
      <td>Nama Owner</td>
      <td>: <?= $owner[0]->name ?></td>
    </tr>
    <tr>
      <td>Alamat</td>
      <td>: <?= nl2br($detail[0]->alamat) ?></td>
    </tr>
    <tr>
      <td>Telp</td>
      <td>: <?= $detail[0]->telp ?></td>
    </tr>
  </table>
  <a href="<?=site_url("dev-checklist/report/".$dev[0]->id_outlet."/".$dev[0]->id_outlet_dev)?>">Edit</a>
<div id="scheduler_here" class="dhx_cal_container" style='width:<?=220 + (15*$dev[0]->max_date)?>px; height:<?=count($master)*75?>px;'>
	<div class="dhx_cal_navline">
<!--		<div class="dhx_cal_prev_button">&nbsp;</div>
		<div class="dhx_cal_next_button">&nbsp;</div>
		<div class="dhx_cal_today_button"></div>-->
		<div class="dhx_cal_date"></div>
	</div>
	<div class="dhx_cal_header">
	</div>
	<div class="dhx_cal_data">
	</div>
</div>
</body>